<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">


    <title>音乐播放器</title>
    <link rel="stylesheet" type="text/css" href=" http://edu.bluej.cn/public/uploads/20180625/20180625095037ajax-neteasse/ajax-neteasse/css/main.css" />
    <link rel="stylesheet" type="text/css" href="http://edu.bluej.cn/public/uploads/20180625/20180625095037ajax-neteasse/ajax-neteasse/css/table.css" />
</head>
<style>
    body {
        user-select: none;
    }
    
    tbody:hover {
        cursor: pointer;
    }
</style>

<body>
    <div id="div1" class="box box-re form-inline">
        <input type="text" class="form-control" id="keywords" placeholder="搜索歌曲" value="" autofocus="autofocus">

        <button class="btn btn-info content" id="send">搜索</button>

        <div style="margin: 10px 0;">
            <button class="btn btn-info content disable" id="prev">上一页</button>
            <button class="btn btn-info content disable" id="next">下一页</button>
        </div>

        <div>
            <audio id="player" src="" controls autoplay></audio>
        </div>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>音乐标题</td>
                    <td>歌手</td>
                    <td>专辑</td>
                    <td>时长</td>
                </tr>
            </thead>
            <tbody>
                <!-- 歌曲列表 -->
                <!-- 格式如下 -->
                <!--
                <tr>
                    <td>夏天的风</td>
                    <td>温岚</td>
                    <td>温式效应</td>
                    <td>04:00</td>  
                    注意：04:00该时间格式可以借助第三方库可以完成，如下操作:
                    moment(歌曲总时长).format('MM:SS')
                    具体可以看这个链接----http://momentjs.cn/docs/#/displaying/format/
                </tr> 
            -->
            </tbody>
        </table>

        <!-- JavaScript 日期处理类库 -->
        <!-- http://momentjs.cn/ -->
        <script src="./monent.js"></script>
        <script src="./封装AJAX.js"></script>
        <script>
            let keywords = document.querySelector("#keywords");
            let send = document.querySelector("#send");
            let tbody = document.querySelector(".table>tbody");
            let Frag = document.createDocumentFragment(); //创建文档碎片
            let player = document.querySelector("#player");

            let arr1,
                arr2,
                id, //歌曲id
                songName, //歌名
                singer, //歌手
                album, //专辑
                duration, //时长
                newTr, //创建tr标签
                tr, //获取tr元素
                number, //搜索后数据库对应的歌曲数量
                limit = 10; //返回最大歌曲数量

            send.addEventListener("click", searchFn);

            document.addEventListener('keyup', function(e) {
                if (e.keyCode == 13 && keywords.value != "") {
                    keywords.style = "caret-color:rgba(0,0,0,0)";
                    searchFn();
                };
            });

            function searchFn() {
                ajax("GET", "https://music.0melon0.cn/search", function(res) {
                    // 一、渲染列表
                    console.log(res);
                    console.log(res.result);
                    console.log(res.result.songs);
                    number = res.result.songs.length;
                    console.log(number);

                    tbody.innerHTML = ''; //清空列表，再重新渲染
                    player.src = ""; //清空src链接
                    arr1 = res.result.songs; //获取到的歌曲数据放入数组arr1
                    arr2 = []; //清空数组arr2的数据

                    arr1.forEach(function(item) {
                        arr2.push(item.id); //获取到的歌曲id推到数组arr2
                        songName = item.name;
                        singer = item.artists[0].name;
                        album = item.album.name;
                        duration = item.duration;
                        newTr = document.createElement("tr")
                        newTr.innerHTML = `<td>${songName}</td><td>${singer}</td><td>${album}</td><td>${moment(duration).format("mm:ss")}</td>`;
                        Frag.appendChild(newTr);
                    });
                    tbody.appendChild(Frag);

                    // 二、获取音源
                    tr = tbody.querySelectorAll("tr");

                    tr.forEach(function(item, index) {
                        tr[index].addEventListener("click", function() {

                            ajax("GET", "https://music.0melon0.cn/song/url", function(res) {
                                console.log(res.data[0].url);
                                player.src = res.data[0].url;
                                console.log(index);
                            }, {
                                "id": arr2[index]
                            });

                        });
                    });
                }, {
                    "keywords": keywords.value
                })
            }
        </script>
</body>

</html>